<template>
    <div>
         <TopMenu ref="topMenuChildRef" @menuRouter="menuHandler"></TopMenu>
    </div>
    <div class="body_pane">
      <div class="tab_pane">
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              editable
              class="head-menu-tabs"
              @tab-click="handleTabClick"
              @tab-remove="handleTabRemove"
              @edit="handleTabsEdit"
          >
              <el-tab-pane
                  v-for="item in editableTabs"
                  :key="item.name"
                  :label="item.title"
                  :name="item.name"
              >
              </el-tab-pane>
          </el-tabs>
      </div>
      <div class="content-wrapper">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <keep-alive>
                <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
</template>
<script setup>
 import { computed, onMounted, onUnmounted, getCurrentInstance,ref,reactive,h,watch } from 'vue';
import TopMenu from '@/components/menu/TopMenu.vue';
 import { useRouter,useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'


const router = useRouter();
const route = useRoute();
const topMenuChildRef = ref(null);

router.push('/pay/info');
let tabIndex = 2
//tab索引
const editableTabsValue = ref('1');
// 当前激活的 Tab
const activeTab = ref('');

//监听路由变化
watch(() => route.path,(newRoutePath) => {
     activeTab.value = newRoutePath
     console.log(activeTab.value);
},{ immediate: true });

//菜单变化拦截
const menuHandler=(menu)=>{
  console.log(JSON.stringify(menu)+" 11111");
   const index = editableTabs.value.findIndex(tab => tab.name === menu.index);
   if(index==-1){
      editableTabsValue.value=menu.name;
      editableTabs.value.push({
        title: menu.name,
        name: menu.index,
        path: menu.path,
      })
   }
    router.push(menu.path)
}

//
const editableTabs = ref([
  {
    title: '首页',
    name: '1-1',
    path:'/pay/info'
  },
  {
    title: '消息中心',
    name: '1-2',
    path:'/message/index'
  },
  {
    title: '朋友列表',
    name: '1-3',
    path:'/friend/index'
  },
])

//标签点击
const handleTabClick=(tab)=>{
  const targetTab = editableTabs.value.find(t => t.name === tab.paneName)
  if (targetTab) {
    router.push(targetTab.path)
  }
}
//标签删除
const handleTabRemove=(tabName)=>{
   if (editableTabs.value.length <= 1) {
      ElMessage({
        message: '标签数量不得小于1',
        type: 'warning',
      })
      return;
   }
   const index = editableTabs.value.findIndex(tab => tab.name === tabName);
   const targetTab=editableTabs.value[index];
   if (index > -1) {
      editableTabs.value.splice(index, 1)
      // 如果关闭的是当前激活的 Tab，切换到前一个 Tab
      if (targetTab.path == activeTab.value) {
        console.log('开始切换')
        const prevTab = editableTabs.value[index - 1] || editableTabs.value[0];
        router.push(prevTab.path);
      }
  }
}

const handleTabsEdit = (targetName,action) => {
  if (action === 'add') {
    //添加
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    //移除
    // const tabs = editableTabs.value
    // let activeName = editableTabsValue.value
    // if (activeName === targetName) {
    //   tabs.forEach((tab, index) => {
    //     if (tab.name === targetName) {
    //       const nextTab = tabs[index + 1] || tabs[index - 1]
    //       if (nextTab) {
    //         activeName = nextTab.name
    //       }
    //     }
    //   })
    // }
    // editableTabsValue.value = activeName
    // editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}

</script>
<style>
.tab_pane{
  .el-tabs{
    height: 30px;
    .el-tabs__header{
         height: 30px;
    }
    .el-tabs__item{
         height: 30px;
    }
  }
}
.content-wrapper{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.body_pane{
    width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

</style>